<template>      
    <div class="person">
       <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
       <button @click="changePrice">修改汽车的价格</button>
       <br>
       <h2>游戏列表：</h2>
       <ul>
        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
       </ul>
       <button @click="changeFirstGame">修改第一个游戏的名字</button>
       <hr>
       <h2>测试：{{ obj.a.b.c }}</h2>
       <button @click="changeObj">测试</button>
    </div>
    
</template>

<script lang="ts"  setup >
    import { reactive } from 'vue';

    let car = reactive({brand:'奔驰',price:100})
    let games =reactive([
        {id:'askdshvk01',name:'01'},
        {id:'askdshvk02',name:'02'},
        {id:'askdshvk03',name:'03'}
    ])
    
    let obj=reactive({
        a:{
            b:{
                c:666
            }
        }
    })

    function changePrice (){
      car.price+=10
    }
    
    function changeFirstGame(){
        games[0].name='02'    
    }

    function changeObj()
    {
        obj.a.b.c = 999
    }
</script>